<!-- 机构作业范围 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 部门树 -->
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <DeptTree v-model="queryParams.deptId" @node-click="handleQuery" />
      </el-col>
      <!-- 用户列表 -->
      <el-col :lg="20" :xs="24">我是用户列表</el-col>
    </el-row>
  </div>
</template>
<script setup>
import UserAPI from "@/api/system/user.api";
import DeptTree from "./components/DeptTree.vue";
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});

const pageData = ref();
const total = ref(0);
const loading = ref(false);
// 查询
function handleQuery() {
  loading.value = true;
  UserAPI.getPage(queryParams)
    .then((data) => {
      console.log("data", data);
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
</style>
